<template>
  <!-- ANCHOR - 输入 -->
  <view>
    <van-dialog id="van-dialog" :show="dialog_show" message="修改成功" />
    <van-dialog id="van-dialog" :show="dele_dialog_show" message="成功删除" />
    <van-popup
      :show="nottoday_dialog_show"
      @close="
        () => {
          nottoday_dialog_show = false;
        }
      "
      round
      position="bottom"
      custom-style="height: 40% width: 80%"
      ><a style="texxt-align: center">不要放弃啊</a></van-popup
    >
    <van-dialog
      id="van-dialog"
      :show="ok_dialog_show"
      title="打卡成功"
      :message="message"
    />
    <van-dialog
      id="van-dialog"
      :show="notok_dialog_show"
      title="打卡失败"
      :message="message"
    />
    <van-popup
      :show="alt_show"
      @close="
        () => {
          this.alt_show = false;
        }
      "
      position="bottom"
      ><van-cell-group>
        <van-field
          :value="card.e_name"
          required
          clearable
          label="项目名"
          placeholder="请输入项目名"
          @change="
            (e) => {
              this.card.e_name = e.detail;
            }
          "
        />
        <van-field
          :value="card.e_desc"
          label="描述"
          placeholder="请输入描述"
          @change="
            (e) => {
              this.card.e_desc = e.detail;
            }
          "
        />
        <van-cell
          title="打卡时间"
          :value="card.e_clk[0] + ' : ' + card.e_clk[1]"
          @click="
            () => {
              this.timepick_show = true;
            }
          "
          @cancel="() => {}"
        />
        <van-button type="danger" @click="sendDele">删除此项</van-button>
        <a style="text-align: right">
          <van-button
            type="warning"
            @click="
              () => {
                this.card = this.cark_back;
                alt_show = false;
              }
            "
            >取消</van-button
          >
          <van-button type="primary" @click="sendAlt">确认</van-button></a
        >
      </van-cell-group></van-popup
    >
    <!-- ANCHOR - 时间选择 -->
    <van-popup
      :show="timepick_show"
      @close="
        () => {
          this.timepick_show = false;
        }
      "
    >
      <van-datetime-picker
        type="time"
        @confirm="
          (e) => {
            this.card.e_clk = e.detail.split(':');
            this.timepick_show = false;
          }
        "
        @cancel="
          () => {
            this.timepick_show = false;
          }
        "
        @change="globalLog"
      />
    </van-popup>
    <!-- ANCHOR - 卡片 -->
    <van-card
      thumb-mode="fill"
      :desc="card.e_desc"
      :title="card.e_name"
      :thumb="card.e_pic"
      :tag="'连续打卡 ' + card.e_leng + '天'"
    >
      <view slot="price">
        <van-count-down
          use-slot
          :time="card.e_time"
          @change="
            (e) => {
              this.c_timedata = e.detail;
            }
          "
        >
          <text>距离打卡时间 </text>
          <text class="timeItem">{{ c_timedata.hours }}</text>
          <text class="semiItem">:</text>
          <text class="timeItem">{{ c_timedata.minutes }}</text>
          <text class="semiItem">:</text>
          <text class="timeItem">{{ c_timedata.seconds }}</text>
        </van-count-down>
        <div style="margin: 20px"></div>
      </view>
      <view slot="footer">
        <van-button
          size="mini"
          plain
          round
          icon="setting-o"
          @click="
            () => {
              this.cark_back = this.card;
              this.alt_show = true;
            }
          "
        ></van-button>
        <!-- ANCHOR - 卡片按钮 -->
        <van-button
          size="mini"
          plain
          round
          type="warning"
          style="margin: 10px"
          @click="
            () => {
              nottoday_dialog_show = true;
            }
          "
          >今天算了</van-button
        >
        <van-button size="mini" plain round type="info" @click="daka"
          >马上打卡</van-button
        >
      </view>
    </van-card>
    <van-divider />
  </view>
</template>
<script>
export default {
  props: ["param"],
  data() {
    return {
      nottoday_dialog_show: false,

      message: "打卡",
      card: this.param,
      cark_back: this.param,
      c_timedata: {},
      alt_show: false, // alt chart
      timepick_show: false, // date_piker
      dialog_show: false,
      dele_dialog_show: false,
      notok_dialog_show: false,
      ok_dialog_show: false,
    };
  },
  methods: {
    globalLog(e) {
      console.log(e);
    },
    sendDele() {
      this.ljsRequest
        .run("dele", this.card)
        .then((res) => {
          console.log(res);
          this.dele_dialog_show = true;
          this.alt_show = false;
          this.$emit("refreshData");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    sendAlt() {
      this.ljsRequest
        .run("alt", this.card)
        .then((res) => {
          console.log(res);
          this.dialog_show = true;
          this.alt_show = false;
          this.$emit("refreshData");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    daka() {
      this.ljsRequest
        .run("daka", this.card)
        .then((res) => {
          console.log(res);
          if (res.ok) {
            this.card.e_leng += 1;
            this.message = "打卡成功";
            this.ok_dialog_show = true;
          } else {
            this.message = res.result;
            this.notok_dialog_show = true;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
<style scoped>
.timeItem {
  display: inline-block;
  width: 22px;
  margin: 5px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: red;
  border-radius: 2px;
}
.semiItem {
  color: red;
  text-align: center;
}
</style>
